<template>
  <div class="pannel-container flex-column">
    <div class="pannel-title">
      <span class="t-name">区域收入统计</span>
    </div>
    <div id="qydy"></div>

  </div>
</template>
<script>
  const colors = [
    {
      color: '#7EB4EA',
      dotColor:'#E0F0FF'
    },
    {
      dotColor: '#B3E5FF',
      color: '#0895E0'
    },
    {
      dotColor: '#FFF1ED',
      color: '#FFC8B7'
    },

  ]


  import _ from 'lodash'
  export default {
    name: 'Srfx',
    computed:{
      option(){
        return {
          backgroundColor: 'transparent',
          grid: {
            top: 35,
            right: 70,
            bottom: 35,
            left: 110,
          },

          tooltip: {
            trigger: 'axis',
            formatter: function (series) {
              return `${series[0].data.name}:${series[0].data.value}`
            },
            textStyle: {
              color: '#ffffff'
            },
            backgroundColor: 'rgba(0, 34, 81, 0.85)'
          },
          yAxis: [{
            type: 'category',
            data: this.seriesData.map((it) => it.name),
            axisTick: {
              alignWithLabel: true,
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ECF0FF', //更改坐标轴文字颜色
                fontSize: 32, //更改坐标轴文字大小
                fontWeight:'bold',
              },
            },
            axisLine: {
              show: false,

            },
          }],
          xAxis: {
            type: 'value',
            axisTick: {
              show: true,
              alignWithLabel: true,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ECF0FF', //更改坐标轴文字颜色
                fontSize: 32, //更改坐标轴文字大小
                fontWeight:'bold',
              },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                type: 'dotted',
                color: 'rgba(255,255,255,0.20)',
              },
            },
          },

          series: [
            {
              type: 'bar',
              data: this.seriesData,
              barWidth: 20,
              z:2,
              yAxisIndex: 0,
              label: {
                show: true,
                position: 'insideRight',
                distance: -20,
                formatter: () => {
                  return `{a|}`
                },
                rich: {
                  a: {
                    width: 26,
                    height: 26,
                    borderRadius:50,
                    backgroundColor: '#fff',
                    shadowColor:'rgba(255, 191, 171, 0.5)',
                    shadowBlur:30
                  }
                }
              },
            },

          ],
        }
      }
    },
    data () {
      return {
        chart: null,
        seriesData:[],

      }
    },
    props: {
      areaVoltageTableList: {
        type: Array,
        default: []
      }
    },
    methods: {
      setOption(){
        this.seriesData = [];
        this.areaVoltageTableList.forEach((o,idx)=>{
          this.seriesData.push({
            value:o.voltageValue,
            name:o.provincialName,
            itemStyle:{
              color: colors[idx % 3].color,
            }
          })
        })
        this.seriesData = this.seriesData.reverse()
        if(this.seriesData.length>10){
          this.option.dataZoom = [
            {
              yAxisIndex: 0,
              type: "slider",
              start: 100,
              end: 100-((10/this.seriesData.length)*100),
              left: "5%",
              top: 50,
            },
          ]
        }

        this.chart.setOption(this.option, true)

      },
      initChart () {
        this.chart = this.$echarts.init(
          document.getElementById(`qydy`)
        )
        // this.chart.setOption(this.option, true)
      }
    },
    mounted () {
      this.initChart()
    }
  }
</script>
<style scoped lang="scss">
  .pannel-container {
    width: 100%;
    background: url("../../assets/imgs/area_sr_bg.png");
    padding: 23px;
    .pannel-title {
      background: url("../../assets/imgs/area_srtj_title.png") no-repeat;
    }

    #qydy {
      flex: 1;
      min-height: 0;
    }

  }
</style>
